<template>
	<view class="list">
		<view class="list-item grace-flex grace-flex-vcenter grace-border-b" @click="goToChat">
			<image :src="item.userpic" mode="widthFix" lazy-load></image>
			<view class="grace-flex grace-flex1 grace-columns">
				<view class="grace-space-between">
					<text class="grace-black grace-h4">{{ item.username }}</text>
					<text class="time">{{ item.time }}</text>
				</view>
				<view class="grace-space-between" style="margin-top: 10rpx;">
					<view class="desc grace-ellipsis grace-black9">{{ item.data }}</view>
					<text v-if="item.unReadNum > 0" class="grace-badge grace-bg-red">{{ item.unReadNum }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var graceJS = require('@/Grace.JS/grace.js');
export default {
	props: {
		item: Object
	},
	methods: {
		goToChat() {
			graceJS.navigate('../chat/chat');
		}
	}
};
</script>

<style lang="stylus">
.list
	padding 0 20rpx
	.list-item
		width 100%
		padding 20rpx 0
		image
			width 100rpx
			height 100rpx
			border-radius 100%
			margin-right 20rpx
			flex-shrink 0
		.time
			color #CBCBCB
		.desc
			width 480rpx
</style>
